<template>
  <view>
    <view class="navbar">
      <view class="title">首页</view>
    </view>
    <view v-if="hasNoPermission" class="auth_mess">暂无权限</view>
    <view class="content" v-else>
      <view class="title-box">
        <view class="data-box" v-for="(item,index) in titleDatas" :key="index">
          <view class="title-name">{{item.label}}</view>
          <view class="value-box">
            <view class="value"><u-count-to :startVal="0" :endVal="item.num" :decimals="2"></u-count-to></view>
            <view class="unit">{{item.unit}}</view>
          </view>
        </view>
      </view>
      <view class="volumn-box">
        <view v-for="(item,index) in volumnDatas" :key="index"
          :class="{'data-box':true,'odd': (index+1)%2 !== 0,'even':index < (volumnDatas.length -2)}">
          <view class="title-name">{{item.label}}</view>
          <view class="value-box">
            <view class="value">{{item.num}}</view>
            <view class="unit">{{item.unit}}</view>
          </view>
        </view>
      </view>
      <view class="alarm-box">
        <u-tabs :list="list1" @click="tabsclick" :current="curIndex" lineHeight="2" lineWidth="70" lineColor="#D22C2D"
          :activeStyle="{
        color: '#D22C2D',fontSize: '15px',fontWeight: '600',}"
          :inactiveStyle="{color: '#666666',fontSize: '15px'}"></u-tabs>
        <view class="more-btns" @click="moreInfoManage">更多></view>
        <view class="list-info">
          <u-list>
            <u-list-item v-for="(item, index) in indexList" :key="index">
              <u-cell :title="`${item.companyName}：${item.alarmReason}`" :value="`${item.alarmTime}`">
              </u-cell>
            </u-list-item>
            <u-list-item class="last-one">
              <u-cell value="查看更多>>" class="more-link" @click="moreInfoManage">
              </u-cell>
            </u-list-item>
          </u-list>
        </view>
      </view>
    </view>
    <u-back-top :scroll-top="scrollTop" :top="top" mode="square" :iconStyle="iconStyle"></u-back-top>
  </view>
</template>

<script>
  import {
    getTotalsData,
    getCompData,
    getwaybillsData,
    getDeviceData,
    getMennus
  } from "@/api/home";
  import update from "@/components/update/index";
  import constant from '@/utils/constant';
  import storage from '@/utils/storage';
  export default {
    props: {
    },
    components: { update },
    data() {
      return {
        hasNoPermission: false,
        curIndex: 0,
        curTypes: "1",
        indexList: [
        ],
        itemName: '运单告警',
        // 返回顶部组件参数
        scrollTop: 0,
        top: "600",
        iconStyle: {
          fontSize: "32rpx",
          color: "#2979ff",
        },
        list1: [
          {
            name: '运单告警',
            value: "1"
          },
          {
            name: '采集器告警',
            value: "2"
          }
        ],
        volumnDatas: [
          {
            label: '昨日销量',
            num: 0,
            unit: '吨'
          },
          {
            label: '本月销量',
            num: 0,
            unit: '吨'
          },
          {
            label: '昨日采购量',
            num: 0,
            unit: '吨'
          },
          {
            label: '本月采购量',
            num: 0,
            unit: '吨'
          },
          {
            label: '昨日销售额',
            num: 0,
            unit: '万元'
          },
          {
            label: '本月销售额',
            num: 0,
            unit: '万元'
          },
          {
            label: '昨日产量',
            num: 0,
            unit: '吨'
          },
          {
            label: '本月产量',
            num: 0,
            unit: '吨'
          },
          {
            label: '昨日车次',
            num: 0,
            unit: '次'
          },
          {
            label: '本月车次',
            num: 0,
            unit: '次'
          }
        ],
        titleDatas: [
          {
            label: '年销量',
            num: 0,
            unit: '万吨'
          },
          {
            label: '年采购量',
            num: 0,
            unit: '万吨'
          },
          {
            label: '年销售额',
            num: 0,
            unit: '万元'
          },
          {
            label: '年采购额',
            num: 0,
            unit: '万元'
          },
        ],
      };
    },
    onPullDownRefresh() {
      this.getList(1);
      uni.stopPullDownRefresh();
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
      uni.hideLoading()
    },
    onLoad() {
      this.getList(1);
    },
    onShow() {
      this.scrollTop = 0;
      const userInfo = storage.get(constant.SYS_CONSIGNOR)
      if (userInfo.sysUser?.userId != 1) {
        this.getMenus()
      }
    },
    created() {

    },
    methods: {
      async getMenus() {
        let res = await getMennus()
        if (res.code == 200) {
          this.hasNoPermission = res.permissions.includes('app:system:home') ? false : true
        }
      },
      moreInfoManage() {
        this.$tab.navigateTo(`/pages/home/alarmInfos?types=${this.curTypes}`);
      },
      tabsclick(e) {
        this.curTypes = e.value
        console.log(this.curTypes)
        this.getList(0);
      },
      goDetail(item) {
        item.alarmType = this.businessTypeList[item.businessType]
        item.processingStatusDesc = this.processingStatusList[item.processingStatus]
        let dataInfo = JSON.stringify(item)
        let url = '/pages/need/abnormalDetail?dataInfo=' + dataInfo;
        this.$tab.navigateTo(url)
      },
      async getList(type) {
        if (type == 1) {
          let res = await getTotalsData()
          if (res.code == 200) {
            this.titleDatas[0].num = res.data.yearsSalesVolume
            this.titleDatas[1].num = res.data.yearPurchaserVolume
            this.titleDatas[2].num = res.data.yearsSalesPrice
            this.titleDatas[3].num = res.data.yearPurchasePrice
          }

          let resCom = await getCompData()
          if (resCom.code == 200) {
            this.volumnDatas[0].num = resCom.data.yesterdaySaleVolume
            this.volumnDatas[1].num = resCom.data.monthSaleVolume
            this.volumnDatas[2].num = resCom.data.yesterdayPurchaseVolume
            this.volumnDatas[3].num = resCom.data.monthPurchaseVolume
            this.volumnDatas[4].num = resCom.data.yesterdaySalePrice
            this.volumnDatas[5].num = resCom.data.monthSalePrice
            this.volumnDatas[6].num = resCom.data.yesterdayProduction
            this.volumnDatas[7].num = resCom.data.monthProduction
            this.volumnDatas[8].num = resCom.data.yesterdayCarNum
            this.volumnDatas[9].num = resCom.data.monthCarNum
          }
        }
        this.indexList = []
        if (this.curTypes == "1") {
          let res = await getwaybillsData()
          if (res.code == 200) {
            this.indexList = res.data
          }
        } else {
          let res = await getDeviceData()
          if (res.code == 200) {
            this.indexList = res.data
          }
        }

      },
    }
  };
</script>

<style scoped lang="less">
  .empty-box {
    padding-bottom: 60rpx;
  }


  /deep/.u-cell__title-text {
    font-size: 31rpx !important;
    font-weight: 500 !important;
    color: #333;
    font-family: PingFang SC, PingFang SC-500;
  }

  /deep/.u-cell__value {
    font-size: 28rpx !important;
    font-weight: 400 !important;
    color: #999;
    font-family: PingFang SC, PingFang SC-400;
  }

  .content {
    .alarm-box {
      width: 100%;
      position: relative;
      border-radius: 16rpx;
      background: #fff;

      .more-btns {
        position: absolute;
        right: 10rpx;
        top: 24rpx;
        cursor: pointer;
        font-size: 15px;
        color: #666;
      }

      .more-btns:hover {
        color: #D22C2C;
      }
    }

    .title-box {
      background-image: url("/static/images/home/bg.png");
      color: #FFFFFF;
      height: 314rpx;
      border-radius: 16rpx;
      font-size: 26rpx;
      padding: 40rpx 20rpx;

      .title-name {
        font-size: 28rpx;
      }

      .data-box {
        border-radius: 16rpx;

        .value-box {
          .value {
            uni-text {
              color: #fff !important;
              font-size: 48rpx !important;
              font-weight: bold !important;
            }
          }
        }
      }
    }

    .volumn-box {
      margin-top: 20rpx;
      height: 760rpx;

      .data-box {
        width: 49%;
        background: #fff;
        padding: 20rpx;
        height: 132rpx;

        .value-box {
          display: flex;
          align-items: baseline;
          height: 90rpx;
          line-height: 70rpx;

          .value {
            font-size: 40rpx;
            font-weight: bold;
            color: #000;
          }
        }
      }

      .odd {
        margin-right: 2%;
      }

      .even {
        margin-bottom: 20rpx;
      }
    }

    .data-box {
      width: 49.5%;
      border-radius: 10rpx;
      float: left;

      .value-box {
        display: flex;
        align-items: baseline;
        height: 90rpx;
        line-height: 70rpx;

        .unit {
          font-size: 26rpx;
          font-weight: 400;
        }
      }
    }

    .chart-content {
      margin-top: 32rpx;

      .chart-box {
        width: 450rpx;
        height: 450rpx;
        margin: 32rpx auto;
        position: relative;

        .chart-title {
          position: absolute;
          left: 50%;
          top: 50%;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          text-align: center;

          .center-label {
            .title {
              font-size: 35rpx;
              color: #666666;
              margin-bottom: 10rpx;
            }

            .value-1 {
              display: initial;
              padding: 0 50rpx;
              margin-top: 10rpx;
              width: auto;
              height: 64rpx;
              border-radius: 50rpx 50rpx 50rpx 50rpx;
              opacity: 1;
              border: 1px solid #536FC8;
              font-size: 40rpx;
              color: #536FC8;

            }

            .value-2 {
              display: initial;
              padding: 0 50rpx;
              width: auto;
              height: 64rpx;
              border-radius: 50rpx 50rpx 50rpx 50rpx;
              opacity: 1;
              border: 1px solid #95CA74;
              font-size: 40rpx;
              color: #95CA74;
            }

            .value-3 {
              display: initial;
              padding: 0 50rpx;
              width: auto;
              height: 64rpx;
              border-radius: 50rpx 50rpx 50rpx 50rpx;
              opacity: 1;
              border: 1px solid #F5C756;
              font-size: 40rpx;
              color: #F5C756;

            }
          }

          .top-20 {
            margin-top: 40rpx;
          }
        }
      }
    }

    .list-info {
      background-color: #ffffff;
      border-radius: 16rpx;
      min-height: 1520rpx;

      /deep/.title .u-cell__title-text {
        font-size: 31rpx !important;
        color: #999999 !important;
      }


      /deep/.u-line {
        background: #FFFFFF;
        border-bottom: #FFFFFF;
        border-top-color: #FFFFFF;
        border-right-color: #FFFFFF;
        border-left-color: #FFFFFF;
      }

      /deep/.title .u-line {
        border-bottom: none !important;
      }
    }
  }
</style>